<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .bar {
            height: 18px;
            background: green;
        }
    </style>
</head>
<body>
<span id="localFile" class="btn btn-info fileinput-button" type="button"><i
        class="fa fa-upload"></i> 添加本地文件
    <input id="fileupload" type="file" data-url="{% url 'upload_demo' %}" name="files" multiple>
</span>
<input id="btn-upload" type="submit" value="upload">
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>
</body>
<script src="/static/js/jquery-2.2.3.min.js"></script>
<script src="/static/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script src="/static/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
<script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            /*add: function (e, data) {
             data.context = $('<p/>').text('Uploading...').appendTo(document.body);
             data.submit();
             },*/
            /*add: function (e, data) {
             data.context = $('<button/>').text('Upload')
             .appendTo(document.body)
             .click(function () {
             $(this).replaceWith($('<p/>').text('Uploading...'));
             data.submit();
             });
             },*/
            add: function (e, data) {
                //data.context = $('<p/>').text('Uploading...').appendTo(document.body);
                $("#btn-upload").click(function () {
                    $(this).replaceWith($('<p/>').text('Uploading...'));
                    data.submit();
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            },
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    //todo:调试fileupload
                    //debugger
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }

        });
    });
</script>
</html>